<template>
  <view class="content">
    <view class="list">
      <block v-for="(lab,index) in labs" :key="index">
        <navigator :url="lab.url">
          <view class="list-item">
            {{lab.title}}
          </view>
        </navigator>
      </block>
    </view>
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        labs: []
      }
    },
    onLoad() {
      this.labs = [{
        url: 'gramma/computed',
        title: '计算属性',
      }, {
        url: 'gramma/express',
        title: '表达式',
      }, {
        url: 'gramma/vbind',
        title: 'v-bind、v-on、v-show指令',
      }, {
        url: 'gramma/vfor',
        title: 'v-for、v-if指令',
      }, {
        url: 'gramma/random',
        title: '随机数,on-load事件',
      }, {
        url: 'gramma/switch-button',
        title: '组件状态变换',
      }, {
        url: 'gramma/event',
        title: '事件、自定义属性',
      }, {
        url: 'product-list/layout-1',
        title: '产品列表1',
      }, {
        url: 'product-list/layout-2',
        title: '产品列表2',
      }, {
        url: 'product-list/layout-3',
        title: '产品列表3',
      }, {
        url: 'product-list/layout-4',
        title: '产品列表4',
      }, ]
    }
  }
</script>

<style>
  view {
    display: flex;
    flex-direction: row;
  }

  .content {
    flex-direction: column;
    flex: 1;
  }

  .list {
    width: 100%;
    flex-direction: column;
  }

  .list-item {
    width: 100%;
    padding: 20upx;
    border-top: #8F8F94 solid 1upx;
  }

  .list-item:last-child {
    border-bottom: #8F8F94 solid 1upx;
  }
</style>
